<template>
  <div class="task-page">
    <el-row class="button-row">
      <el-button type="primary" @click="releaseGradeTask">发布互评</el-button>
    </el-row>
    <el-row class="tasks-row">
      <TheGradeTask 
        v-for="(item, index) in gradetasks" 
        :key="index" 
        :item="item"
        class="grading-task" 
        @click="toShowItem(item)" 
      />
    </el-row>
    <el-dialog v-model="dialogVisible" width="50%">
      <ReleaseGradeTask @closed="closePage"/>
    </el-dialog>
  </div>
</template>
  
<style scoped>
  .task-page {
    padding: 10px;
    background-color: #f5f5f5;
    min-height: 100vh;
  }

  .button-row {
    margin-bottom: 20px;
    display: flex;
    justify-content: flex-end;
  }

  .tasks-row {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    
  }

  .grading-task {
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    height: 100px;
    padding: 3%;
    cursor: pointer;
    transition: transform 0.3s;
  }

  .grading-task:hover {
    transform: scale(1.05);
  }

</style>

<script setup>
import TheGradeTask from '@/components/TheGradeTask.vue';
import ReleaseGradeTask from './ReleaseGradeTask.vue';
import axios from 'axios';
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';


const router = useRouter()
let gradetasks = ref([])
const tids = ref('')



let dialogVisible = ref(false)
const releaseGradeTask = (() => {
  dialogVisible.value = true
})

const closePage = (() => {
  dialogVisible.value = false
  location.reload()
})

const toShowItem = ((item) => {
    if(item){
        router.push({ name:'showgradecase', state:item })
    }
})

const getGradetask = (() => {
  axios.get('http://localhost:8080/gradetask/getgradetaskbytid', {params: {tid: tids.value}})
  .then((res) => {
      gradetasks.value = res.data;
  })
  .catch((err) => {
      console.log(err)
  })
})

onMounted(() => {
  tids.value = JSON.parse(window.localStorage.getItem('token')).teacherId// 当前用户姓名
 getGradetask()
})

</script>
